<!DOCTYPE html>
<html>
    <head>
        <title>无缝滚动1</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            *{margin: 0;padding: 0;list-style-type: none;text-decoration: none;}
            #div1{width:1130px;height: 200px;padding: 100px 0;position: relative;margin: auto;}
            #div2{width: 960px;height: 180px;background:#ccc;margin: 0 auto;border:5px solid #0ff;position: relative;overflow: hidden;}
            ul{width:5120px;height:180px;left:0;top:0;position: absolute;}
            ul li {width:320px;height:180px;float:left;}
            img{width: 100%;height:100%;}
            a{width: 80px;height: 100px;font-size: 18px;line-height:100px;text-align: center;background: #000;color: #fff;}
            .left{position: absolute;left: 0;top:50%;margin-top:-50px; }
            .right{position: absolute;right:0;top:50%;margin-top:-50px; }

        </style>
    </head>
    <body>
        <div id="div1">
            <div id="div2">
                <ul>
                    <li><img src="img/1.jpg" alt=""></li>
                    <li><img src="img/2.jpg" alt=""></li>
                    <li><img src="img/3.jpg" alt=""></li>
                    <li><img src="img/4.jpg" alt=""></li>
                    <li><img src="img/5.jpg" alt=""></li>
                    <li><img src="img/6.jpg" alt=""></li>
                    <li><img src="img/7.jpg" alt=""></li>
                    <li><img src="img/8.jpg" alt=""></li>
                </ul>
            </div>
            <a href="javascript:;" class="left">left</a>
            <a href="javascript:;" class="right">right</a>
        </div>    
        <script src="js/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            var ul = $("ul");
            var x = 0;
            var speed;
            var li_w = $("ul li").outerWidth(true);
            var left = $(".left");
            var right = $(".right");
            ul.append(ul.html());
            var li_size = $("ul li").length;
            var a = li_size * li_w * 0.5;
            var div = $("#div2");
            var tick;
            left.click(function () {
                speed = -2;
                auto();
            });
            right.click(function () {
                speed = 2;
                auto();
            });
            div.hover(function () {
                clearInterval(tick);
            }, function () {
                left.click();
            });
            function auto() {
                tick = setInterval(function () {
                    if (x >= 0) {
                        x = -a;
                    } else
                    if (x <= -a) {
                        x = 0;
                    }
                    ul.css({"left": x += speed});
                }, 30);
            }
            ;
        </script>
    </body>
</html>
